<template>
	<view>
		<u-sticky>
			<view class="nav">
				<uni-nav-bar :statusBar="true" :border="false" :fixed="false" leftIcon="back" @clickLeft="$tab.back()"
					title="我的资产" background-color="transparent" color="#FFF" />

				<view class="flex items-center flex-col justify-around p-32" v-if="list.length > 0">
					<view class="text-FFF flex items-center flex-col">
						<view class="text-48 font-700">
							{{list[selectIndex].amount}} <text
								class="text-32">{{ list[selectIndex].moneyName == '金豆' ? '个' : ''}}</text>
						</view>
						<view class="mt-8">
							我的{{list[selectIndex].moneyName}}
						</view>

						<view class="mt-8"
							v-if="list[selectIndex].moneyName == '金豆' || list[selectIndex].moneyName == '熵豆'">
							价值{{list[selectIndex].cashAmount }}元人民币
						</view>
					</view>

					<view class="flex items-center text-FFF text-center mt-48">
						<view class="nav-btn btn2 mr-20" @click="$tab.nav(`/pages/mine/currency/transformDeer?type=4`)"
							v-if="list[selectIndex].moneyId == '7'">
							星耀余额
						</view>
						
						<view class="nav-btn btn3" v-if="isSend"
							@click="$tab.nav(`/pages/mine/currency/conversion?currencyId=${list[selectIndex].moneyId}&title=${list[selectIndex].moneyName}&alway=${list[selectIndex].amount}`)">
							转赠
						</view>

						<!-- <view class="nav-btn btn1 ml-20" v-if="list[selectIndex].moneyName == '余额'"
						@click="$tab.nav(`/pages/mine/financing/index`)">
						余额通
					</view> -->

						<view class="nav-btn btn2 ml-20"
							v-if="list[selectIndex].moneyName == '营业额' || list[selectIndex].moneyName == '余额'"
							@click="$tab.nav(`/pages/mine/withdraw/index?moneyId=${list[selectIndex].moneyId}`)">
							去提现
						</view>

						<view class="nav-btn btn1 ml-20" v-if="list[selectIndex].moneyName == '金豆'"
							@click="convertShow = true">
							转换余额
						</view>

						<view class="nav-btn btn2 ml-20" @click="$tab.nav(`/pages/mine/currency/transformDeer?type=1`)"
							v-if="list[selectIndex].moneyName == '金豆'">
							功德金
						</view>

						<view class="nav-btn btn2 ml-20" @click="$tab.nav(`/pages/mine/currency/transformDeer?type=3`)"
							v-if="list[selectIndex].moneyName == '熵豆'">
							可兑换熵豆
						</view>

						<view class="nav-btn btn2 ml-20" @click="$tab.nav(`/pages/mine/currency/transformDeer?type=2`)"
							v-if="list[selectIndex].moneyName == '金积分' && showDJ">
							冻结金积分
						</view>
					</view>
				</view>
			</view>

			<div class="" style="background: #f8f8f8;">
				<view class="p-32">
					<u-scroll-list indicatorActiveColor="#FE6A38" indicatorColor="#FFEAE3">
						<view v-for="(item, index) in list" :key="index" class="box-1 text-center mr-32 font-700"
							:style="{
					background:index === selectIndex ? 'linear-gradient( 180deg, #FF561D 33%, #FF0064 100%)' : '#FFEAE3',
					color:index === selectIndex ? '#FFF' : '#6C6C6C'
				}" @click="changeSelect(index)">
							{{item.moneyName}}
						</view>
					</u-scroll-list>
				</view>
				<view class="text-40 font-700 px-20">
					明细
				</view>
			</div>
		</u-sticky>

		<view class="px-20 mt-32">
			<s-pull-scroll ref="pullScroll" :pullDown="pullDown" :pullUp="loadData" :fixed="false">
				<view class="" v-for="(item,index) in detailList" :key="index">
					<view class="item">
						<view class="flex justify-between items-center">
							<text class="text-36 " style="max-width: 450rpx;">{{item.useRemark}}</text>
							<text class="text-36 font-700" :style="{color:item.payment==1 ? '#02CE8A' : '#FF912A'}">
								{{item.payment==1 ? '+'+item.amount : '-'+item.amount}}
								<text
									v-if="list[selectIndex].moneyName == '金豆' || list[selectIndex].moneyName == '熵豆'">个</text>
							</text>
						</view>
						<view class="flex justify-between items-center mt-20">
							<text class=" text-gray">{{item.createTime}}</text>
							<text class=" text-gray">余额：{{item.balance}}
								<text
									v-if="list[selectIndex].moneyName == '金豆' || list[selectIndex].moneyName == '熵豆'">个</text></text>
						</view>
					</view>
					<u-divider></u-divider>
				</view>
			</s-pull-scroll>
		</view>

		<u-popup :show="convertShow" @close="convertShow = false" bgColor="transparent" mode="center"
			:safeAreaInsetBottom="false">
			<view class="convert-wrap flex flex-col items-center" v-if="convertShow">
				<view class="" style="color: #C4816B;">
					我的金豆
				</view>
				<view class="text-44 font-700 mt-12" style="color: #FE6835;">
					{{list[selectIndex].amount}}
				</view>
				<!-- 	<view class="text-24" style="color: #F62323;">
					转换余额手续费：10%
				</view> -->
				<view class="box-2 mt-28 py-32 flex flex-col items-center">
					<input type="number" v-model="convertValue" class="input text-center" placeholder="请输入转换额度" />
				</view>

				<view class="mt-44 text-center flex items-center">
					<view class="box-3 text-32" style="color: #676767;" @click="convertShow = false">
						取消转换
					</view>
					<view class="box-3 box-4 text-32 ml-48 text-FFF" style="color: #676767;" @click="convertConfirm">
						立即转换
					</view>
				</view>
			</view>
		</u-popup>

		<u-loading-page :loading="loading"
			image="https://file.fulewanjia.com/fulewanjia/profile/appImages/common/loading.gif" icon-size="100"
			loading-text=" " loading-mode="spinner"></u-loading-page>
	</view>
</template>

<script>
	import {
		throttle
	} from 'throttle-debounce';
	var thro;
	export default {
		data() {
			return {
				list: [],
				loading: false,
				selectIndex: 0,
				detailList: [],
				convertShow: false,
				convertValue: "",
				isSend: null, //能否转增
				ratioId: null, //转换id

				showDJ: true
			};
		},
		onLoad(e) {
			thro = this
			if (e.index) {
				this.selectIndex = Number(e.index)
			}
		},
		onShow() {
			this.getData()
		},
		methods: {
			convertConfirm: throttle(2000, async () => {
				if (Number(thro.convertValue) < 1 || Number(thro.convertValue) > thro.list[thro.selectIndex]
					.amount) {
					thro.$modal.msg('请输入正确的转换额度!')
					return
				}

				const res = await thro.$Api.currency.moneyChange(thro.ratioId, thro.convertValue)
				thro.convertValue = ""
				thro.convertShow = false
				thro.refresh()
			}, {
				noTrailing: true
			}),
			changeSelect(index) {
				this.selectIndex = index
				this.isSend = this.list[this.selectIndex].moneyConfig.isSend
				this.refresh()
			},
			refresh() {
				this.$nextTick(() => {
					this.$refs.pullScroll.refresh();
				});
			},
			pullDown(pullScroll) {
				setTimeout(() => {
					this.loadData(pullScroll);
				}, 200);
			},
			loadData(pullScroll) {
				setTimeout(async () => {
					if (pullScroll.page == 1) {
						this.detailList = [];
					}

					const res = await this.$Api.user.lncomeList({
						moneyId: this.list[this.selectIndex].moneyId,
						pageSize: 10,
						pageNum: pullScroll.page
					})

					console.log(res, '货币记录')

					this.detailList = this.detailList.concat(res.rows || []);
					if (this.detailList.length == 0) {
						pullScroll.empty()
					}

					if (this.detailList.length >= res.total) {
						pullScroll.finish();
					} else {
						pullScroll.success();
					}
				}, 500);
			},
			async getData() {
				const userRichInfo = await this.$Api.user.userRichInfo()
				this.list = userRichInfo.data.filter(item => {
					if (item.moneyId == "6") {
						this.ratioId = item.moneyChangeConfigList[0].id
					}
					if (item.moneyId == "9" && item.amount == 0) {
						this.showDJ = false
					}
					return item.moneyId != "8" && item.moneyId != "9" && item.moneyId != "10" && item
						.moneyId != "14"  && item
						.moneyId != "15"
				})

				this.isSend = this.list[this.selectIndex].moneyConfig.isSend

				console.log('this.ratioId', this.ratioId)
				this.refresh()
			},
		}
	}
</script>

<style lang="scss">
	/deep/ .u-sticky {
		top: 0 !important;
	}

	.nav {
		background: url(https://file.fulewanjia.com/fulewanjia/profile/appImages/money-bg.png) no-repeat;
		background-size: 100% 100%;

		.nav-btn {
			width: 160rpx;
			height: 64rpx;
			line-height: 64rpx;
		}

		.btn1 {
			background: url(https://file.fulewanjia.com/fulewanjia/profile/appImages/btn-bg1.png) no-repeat;
			background-size: 100% 100%;
		}

		.btn2 {
			background: url(https://file.fulewanjia.com/fulewanjia/profile/appImages/btn-bg2.png) no-repeat;
			background-size: 100% 100%;
		}

		.btn3 {
			background: url(https://file.fulewanjia.com/fulewanjia/profile/appImages/btn-bg3.png) no-repeat;
			background-size: 100% 100%;
		}
	}

	.box-1 {
		width: 178rpx;
		height: 80rpx;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		line-height: 80rpx;
		min-width: 178rpx;
	}

	.convert-wrap {
		width: 686rpx;
		height: 892rpx;
		background: url(https://file.fulewanjia.com/fulewanjia/profile/appImages/img_fabuqiugou@2x.png) no-repeat;
		background-size: 100% 100%;
		padding: 386rpx 0 34rpx 0;

		.box-2 {
			width: 622rpx;
			background: #FCF8F4;
			border-radius: 28rpx 28rpx 28rpx 28rpx;

			.input {
				width: 536rpx;
				height: 88rpx;
				background: #F4EEDE;
				border-radius: 98rpx 98rpx 98rpx 98rpx;
			}
		}

		.box-3 {
			width: 240rpx;
			height: 80rpx;
			background: #E8E2E0;
			border-radius: 356rpx 356rpx 356rpx 356rpx;
			line-height: 80rpx;
		}

		.box-4 {
			background: linear-gradient(180deg, #FF561D 33%, #FF0064 100%);
		}
	}
</style>